<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JS高级知识点 | 前端档案</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="前端通关宝典">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.e02fc531.css" as="style"><link rel="preload" href="/assets/js/app.bf44e39b.js" as="script"><link rel="preload" href="/assets/js/2.db7a59af.js" as="script"><link rel="preload" href="/assets/js/269.9c9a802f.js" as="script"><link rel="prefetch" href="/assets/js/10.3bbe2f24.js"><link rel="prefetch" href="/assets/js/100.43061c81.js"><link rel="prefetch" href="/assets/js/101.2e8a188c.js"><link rel="prefetch" href="/assets/js/102.3f4f14f0.js"><link rel="prefetch" href="/assets/js/103.5ed45f48.js"><link rel="prefetch" href="/assets/js/104.29ef9283.js"><link rel="prefetch" href="/assets/js/105.e4051d70.js"><link rel="prefetch" href="/assets/js/106.ec073f00.js"><link rel="prefetch" href="/assets/js/107.9b165150.js"><link rel="prefetch" href="/assets/js/108.c0031864.js"><link rel="prefetch" href="/assets/js/109.06bb75a7.js"><link rel="prefetch" href="/assets/js/11.402e3434.js"><link rel="prefetch" href="/assets/js/110.edc92528.js"><link rel="prefetch" href="/assets/js/111.e50e0cca.js"><link rel="prefetch" href="/assets/js/112.b0decdf4.js"><link rel="prefetch" href="/assets/js/113.f0801886.js"><link rel="prefetch" href="/assets/js/114.25ab8fa4.js"><link rel="prefetch" href="/assets/js/115.36fc62f3.js"><link rel="prefetch" href="/assets/js/116.8df9a6aa.js"><link rel="prefetch" href="/assets/js/117.1ec0fada.js"><link rel="prefetch" href="/assets/js/118.51c54869.js"><link rel="prefetch" href="/assets/js/119.d708669d.js"><link rel="prefetch" href="/assets/js/12.eba9a66a.js"><link rel="prefetch" href="/assets/js/120.a44efeea.js"><link rel="prefetch" href="/assets/js/121.581a4ae4.js"><link rel="prefetch" href="/assets/js/122.e54e19e1.js"><link rel="prefetch" href="/assets/js/123.62aa41d0.js"><link rel="prefetch" href="/assets/js/124.c51c6b7f.js"><link rel="prefetch" href="/assets/js/125.68055811.js"><link rel="prefetch" href="/assets/js/126.8b16d246.js"><link rel="prefetch" href="/assets/js/127.fc7608d6.js"><link rel="prefetch" href="/assets/js/128.0df431fc.js"><link rel="prefetch" href="/assets/js/129.77241cfd.js"><link rel="prefetch" href="/assets/js/13.a3e65817.js"><link rel="prefetch" href="/assets/js/130.2bf0b622.js"><link rel="prefetch" href="/assets/js/131.77da1093.js"><link rel="prefetch" href="/assets/js/132.c1ac84bc.js"><link rel="prefetch" href="/assets/js/133.001af559.js"><link rel="prefetch" href="/assets/js/134.98ff69db.js"><link rel="prefetch" href="/assets/js/135.b91963f4.js"><link rel="prefetch" href="/assets/js/136.e3df531a.js"><link rel="prefetch" href="/assets/js/137.157c5a5f.js"><link rel="prefetch" href="/assets/js/138.1d3a1791.js"><link rel="prefetch" href="/assets/js/139.9e17df54.js"><link rel="prefetch" href="/assets/js/14.bd9cc5f8.js"><link rel="prefetch" href="/assets/js/140.22839840.js"><link rel="prefetch" href="/assets/js/141.dbde614d.js"><link rel="prefetch" href="/assets/js/142.5a6858ba.js"><link rel="prefetch" href="/assets/js/143.e26d707c.js"><link rel="prefetch" href="/assets/js/144.5b1fbe13.js"><link rel="prefetch" href="/assets/js/145.09921e20.js"><link rel="prefetch" href="/assets/js/146.8ea606b7.js"><link rel="prefetch" href="/assets/js/147.41bda9d5.js"><link rel="prefetch" href="/assets/js/148.d89f18bc.js"><link rel="prefetch" href="/assets/js/149.16aa39c9.js"><link rel="prefetch" href="/assets/js/15.deb2f25a.js"><link rel="prefetch" href="/assets/js/150.07798494.js"><link rel="prefetch" href="/assets/js/151.6732ee94.js"><link rel="prefetch" href="/assets/js/152.c644167e.js"><link rel="prefetch" href="/assets/js/153.040f256b.js"><link rel="prefetch" href="/assets/js/154.1cec3035.js"><link rel="prefetch" href="/assets/js/155.a4b51a17.js"><link rel="prefetch" href="/assets/js/156.095b78e0.js"><link rel="prefetch" href="/assets/js/157.eb262a26.js"><link rel="prefetch" href="/assets/js/158.35756e8c.js"><link rel="prefetch" href="/assets/js/159.6ac43664.js"><link rel="prefetch" href="/assets/js/16.c7b17381.js"><link rel="prefetch" href="/assets/js/160.0a56c40c.js"><link rel="prefetch" href="/assets/js/161.8320b48a.js"><link rel="prefetch" href="/assets/js/162.09ba1172.js"><link rel="prefetch" href="/assets/js/163.f7fb82e8.js"><link rel="prefetch" href="/assets/js/164.ab9df42b.js"><link rel="prefetch" href="/assets/js/165.f012858f.js"><link rel="prefetch" href="/assets/js/166.b3f190e3.js"><link rel="prefetch" href="/assets/js/167.43b66e59.js"><link rel="prefetch" href="/assets/js/168.4eb162d3.js"><link rel="prefetch" href="/assets/js/169.0375d2cf.js"><link rel="prefetch" href="/assets/js/17.da61c942.js"><link rel="prefetch" href="/assets/js/170.90c9c235.js"><link rel="prefetch" href="/assets/js/171.672fc257.js"><link rel="prefetch" href="/assets/js/172.dfa9d8d9.js"><link rel="prefetch" href="/assets/js/173.61a6ec8e.js"><link rel="prefetch" href="/assets/js/174.4f4ef0d7.js"><link rel="prefetch" href="/assets/js/175.675d01d1.js"><link rel="prefetch" href="/assets/js/176.5bd1bcb7.js"><link rel="prefetch" href="/assets/js/177.4355dadd.js"><link rel="prefetch" href="/assets/js/178.79ed29b8.js"><link rel="prefetch" href="/assets/js/179.2247dc30.js"><link rel="prefetch" href="/assets/js/18.6e554767.js"><link rel="prefetch" href="/assets/js/180.db79361a.js"><link rel="prefetch" href="/assets/js/181.85a33295.js"><link rel="prefetch" href="/assets/js/182.0bc317bc.js"><link rel="prefetch" href="/assets/js/183.7769a38e.js"><link rel="prefetch" href="/assets/js/184.9b0aba05.js"><link rel="prefetch" href="/assets/js/185.f6dc87bd.js"><link rel="prefetch" href="/assets/js/186.e3b7de00.js"><link rel="prefetch" href="/assets/js/187.a6dadcea.js"><link rel="prefetch" href="/assets/js/188.d3f8b0e3.js"><link rel="prefetch" href="/assets/js/189.1112499f.js"><link rel="prefetch" href="/assets/js/19.f800e0d1.js"><link rel="prefetch" href="/assets/js/190.e3255e84.js"><link rel="prefetch" href="/assets/js/191.34deece6.js"><link rel="prefetch" href="/assets/js/192.69821c0e.js"><link rel="prefetch" href="/assets/js/193.769a5088.js"><link rel="prefetch" href="/assets/js/194.afaa2cde.js"><link rel="prefetch" href="/assets/js/195.5b94bbc6.js"><link rel="prefetch" href="/assets/js/196.3b078264.js"><link rel="prefetch" href="/assets/js/197.2d9585d3.js"><link rel="prefetch" href="/assets/js/198.3095d8b8.js"><link rel="prefetch" href="/assets/js/199.79b6db11.js"><link rel="prefetch" href="/assets/js/20.4a74a968.js"><link rel="prefetch" href="/assets/js/200.c309ef7a.js"><link rel="prefetch" href="/assets/js/201.bded46e8.js"><link rel="prefetch" href="/assets/js/202.801fb3ea.js"><link rel="prefetch" href="/assets/js/203.b9933f5e.js"><link rel="prefetch" href="/assets/js/204.255b43df.js"><link rel="prefetch" href="/assets/js/205.000fb7ac.js"><link rel="prefetch" href="/assets/js/206.8f945829.js"><link rel="prefetch" href="/assets/js/207.74942b2e.js"><link rel="prefetch" href="/assets/js/208.329d8230.js"><link rel="prefetch" href="/assets/js/209.3fc54586.js"><link rel="prefetch" href="/assets/js/21.5f725cbd.js"><link rel="prefetch" href="/assets/js/210.1aa9659f.js"><link rel="prefetch" href="/assets/js/211.702df03f.js"><link rel="prefetch" href="/assets/js/212.ca95f208.js"><link rel="prefetch" href="/assets/js/213.024b4fa6.js"><link rel="prefetch" href="/assets/js/214.e2830dd8.js"><link rel="prefetch" href="/assets/js/215.0b646cb4.js"><link rel="prefetch" href="/assets/js/216.9bd6d019.js"><link rel="prefetch" href="/assets/js/217.586593b4.js"><link rel="prefetch" href="/assets/js/218.a2244829.js"><link rel="prefetch" href="/assets/js/219.1d858220.js"><link rel="prefetch" href="/assets/js/22.7d2b7a74.js"><link rel="prefetch" href="/assets/js/220.7f5e3dbd.js"><link rel="prefetch" href="/assets/js/221.d1f79d31.js"><link rel="prefetch" href="/assets/js/222.51d8a12c.js"><link rel="prefetch" href="/assets/js/223.797028ea.js"><link rel="prefetch" href="/assets/js/224.d925bf8b.js"><link rel="prefetch" href="/assets/js/225.cfe12606.js"><link rel="prefetch" href="/assets/js/226.b6bd41b4.js"><link rel="prefetch" href="/assets/js/227.15412d16.js"><link rel="prefetch" href="/assets/js/228.66af5157.js"><link rel="prefetch" href="/assets/js/229.cfb11559.js"><link rel="prefetch" href="/assets/js/23.1409c9f4.js"><link rel="prefetch" href="/assets/js/230.d2e613b5.js"><link rel="prefetch" href="/assets/js/231.85b8958b.js"><link rel="prefetch" href="/assets/js/232.42df48c8.js"><link rel="prefetch" href="/assets/js/233.d3be0c78.js"><link rel="prefetch" href="/assets/js/234.bb68d0be.js"><link rel="prefetch" href="/assets/js/235.bfd00052.js"><link rel="prefetch" href="/assets/js/236.3d58cc9d.js"><link rel="prefetch" href="/assets/js/237.d9af6062.js"><link rel="prefetch" href="/assets/js/238.54894974.js"><link rel="prefetch" href="/assets/js/239.b69669d0.js"><link rel="prefetch" href="/assets/js/24.e06b2b32.js"><link rel="prefetch" href="/assets/js/240.44f7b333.js"><link rel="prefetch" href="/assets/js/241.2d307b1a.js"><link rel="prefetch" href="/assets/js/242.47aecf42.js"><link rel="prefetch" href="/assets/js/243.b5afbb6e.js"><link rel="prefetch" href="/assets/js/244.8e04094f.js"><link rel="prefetch" href="/assets/js/245.78009475.js"><link rel="prefetch" href="/assets/js/246.eb7991c2.js"><link rel="prefetch" href="/assets/js/247.00c024fd.js"><link rel="prefetch" href="/assets/js/248.144c2842.js"><link rel="prefetch" href="/assets/js/249.35bae652.js"><link rel="prefetch" href="/assets/js/25.5e7aeaa8.js"><link rel="prefetch" href="/assets/js/250.854bde18.js"><link rel="prefetch" href="/assets/js/251.7cbb77f8.js"><link rel="prefetch" href="/assets/js/252.1ed96448.js"><link rel="prefetch" href="/assets/js/253.9d736b7d.js"><link rel="prefetch" href="/assets/js/254.137c6595.js"><link rel="prefetch" href="/assets/js/255.ac6865dc.js"><link rel="prefetch" href="/assets/js/256.055e06fd.js"><link rel="prefetch" href="/assets/js/257.63559614.js"><link rel="prefetch" href="/assets/js/258.b6958ba1.js"><link rel="prefetch" href="/assets/js/259.bc6da491.js"><link rel="prefetch" href="/assets/js/26.77d42111.js"><link rel="prefetch" href="/assets/js/260.a8e9559d.js"><link rel="prefetch" href="/assets/js/261.b051c6dd.js"><link rel="prefetch" href="/assets/js/262.e83c7ca8.js"><link rel="prefetch" href="/assets/js/263.bd14a165.js"><link rel="prefetch" href="/assets/js/264.65c3b624.js"><link rel="prefetch" href="/assets/js/265.db4371b9.js"><link rel="prefetch" href="/assets/js/266.97118d6c.js"><link rel="prefetch" href="/assets/js/267.de83cb0b.js"><link rel="prefetch" href="/assets/js/268.2bdd86cb.js"><link rel="prefetch" href="/assets/js/27.fa37605f.js"><link rel="prefetch" href="/assets/js/270.f599f9fe.js"><link rel="prefetch" href="/assets/js/271.275d4619.js"><link rel="prefetch" href="/assets/js/272.ed0fabf6.js"><link rel="prefetch" href="/assets/js/273.fc279fbe.js"><link rel="prefetch" href="/assets/js/274.fe4b3d21.js"><link rel="prefetch" href="/assets/js/275.922677e1.js"><link rel="prefetch" href="/assets/js/276.597ceb81.js"><link rel="prefetch" href="/assets/js/277.71871d2e.js"><link rel="prefetch" href="/assets/js/278.10923657.js"><link rel="prefetch" href="/assets/js/279.cddbf2d7.js"><link rel="prefetch" href="/assets/js/28.7418a003.js"><link rel="prefetch" href="/assets/js/280.66542c64.js"><link rel="prefetch" href="/assets/js/281.c7ca5292.js"><link rel="prefetch" href="/assets/js/282.d105ef08.js"><link rel="prefetch" href="/assets/js/283.ae8d69c7.js"><link rel="prefetch" href="/assets/js/284.8763c337.js"><link rel="prefetch" href="/assets/js/285.cce4e007.js"><link rel="prefetch" href="/assets/js/29.42b5bf54.js"><link rel="prefetch" href="/assets/js/3.a2af090e.js"><link rel="prefetch" href="/assets/js/30.7fe0ece5.js"><link rel="prefetch" href="/assets/js/31.e05d012e.js"><link rel="prefetch" href="/assets/js/32.0a6466c6.js"><link rel="prefetch" href="/assets/js/33.8db270b1.js"><link rel="prefetch" href="/assets/js/34.c6e6ae70.js"><link rel="prefetch" href="/assets/js/35.8fc12d56.js"><link rel="prefetch" href="/assets/js/36.cb54baf3.js"><link rel="prefetch" href="/assets/js/37.656cb8eb.js"><link rel="prefetch" href="/assets/js/38.9152ff6b.js"><link rel="prefetch" href="/assets/js/39.f71e5e3d.js"><link rel="prefetch" href="/assets/js/4.02de3c47.js"><link rel="prefetch" href="/assets/js/40.3d664ab4.js"><link rel="prefetch" href="/assets/js/41.fc6e4f78.js"><link rel="prefetch" href="/assets/js/42.c17c3353.js"><link rel="prefetch" href="/assets/js/43.e78a329f.js"><link rel="prefetch" href="/assets/js/44.326a0948.js"><link rel="prefetch" href="/assets/js/45.67e6e1d4.js"><link rel="prefetch" href="/assets/js/46.85f71b1e.js"><link rel="prefetch" href="/assets/js/47.f2e524a6.js"><link rel="prefetch" href="/assets/js/48.843108ee.js"><link rel="prefetch" href="/assets/js/49.98713c95.js"><link rel="prefetch" href="/assets/js/5.f38c3daa.js"><link rel="prefetch" href="/assets/js/50.2c70898f.js"><link rel="prefetch" href="/assets/js/51.023fea5d.js"><link rel="prefetch" href="/assets/js/52.3877af4c.js"><link rel="prefetch" href="/assets/js/53.3938d117.js"><link rel="prefetch" href="/assets/js/54.4cf45721.js"><link rel="prefetch" href="/assets/js/55.6894de94.js"><link rel="prefetch" href="/assets/js/56.48fd0f63.js"><link rel="prefetch" href="/assets/js/57.2c3b8155.js"><link rel="prefetch" href="/assets/js/58.fee976b4.js"><link rel="prefetch" href="/assets/js/59.d57c3ac9.js"><link rel="prefetch" href="/assets/js/6.a7d50f34.js"><link rel="prefetch" href="/assets/js/60.9954df49.js"><link rel="prefetch" href="/assets/js/61.1b870f60.js"><link rel="prefetch" href="/assets/js/62.37537ac3.js"><link rel="prefetch" href="/assets/js/63.5e7cfac8.js"><link rel="prefetch" href="/assets/js/64.407003ca.js"><link rel="prefetch" href="/assets/js/65.ba6c5d7d.js"><link rel="prefetch" href="/assets/js/66.2b5a751b.js"><link rel="prefetch" href="/assets/js/67.2faf15d0.js"><link rel="prefetch" href="/assets/js/68.19e50dcb.js"><link rel="prefetch" href="/assets/js/69.eec003cb.js"><link rel="prefetch" href="/assets/js/7.6c196c91.js"><link rel="prefetch" href="/assets/js/70.98d2461a.js"><link rel="prefetch" href="/assets/js/71.184225a4.js"><link rel="prefetch" href="/assets/js/72.956d136a.js"><link rel="prefetch" href="/assets/js/73.3e68378e.js"><link rel="prefetch" href="/assets/js/74.cec669e7.js"><link rel="prefetch" href="/assets/js/75.d418b5f0.js"><link rel="prefetch" href="/assets/js/76.f3f9ccd6.js"><link rel="prefetch" href="/assets/js/77.f24df03b.js"><link rel="prefetch" href="/assets/js/78.7eee67a8.js"><link rel="prefetch" href="/assets/js/79.8fadb3f7.js"><link rel="prefetch" href="/assets/js/8.b7eb2fb2.js"><link rel="prefetch" href="/assets/js/80.4f6165b0.js"><link rel="prefetch" href="/assets/js/81.49b03807.js"><link rel="prefetch" href="/assets/js/82.7ea07224.js"><link rel="prefetch" href="/assets/js/83.d6bd71b7.js"><link rel="prefetch" href="/assets/js/84.26db1aa8.js"><link rel="prefetch" href="/assets/js/85.c8f1f3bb.js"><link rel="prefetch" href="/assets/js/86.fd1c3c7f.js"><link rel="prefetch" href="/assets/js/87.38ab6ed9.js"><link rel="prefetch" href="/assets/js/88.f0a874e0.js"><link rel="prefetch" href="/assets/js/89.2b3352d4.js"><link rel="prefetch" href="/assets/js/9.d7ae4925.js"><link rel="prefetch" href="/assets/js/90.286cc7d4.js"><link rel="prefetch" href="/assets/js/91.c17c366b.js"><link rel="prefetch" href="/assets/js/92.29bc2389.js"><link rel="prefetch" href="/assets/js/93.6d335097.js"><link rel="prefetch" href="/assets/js/94.89ab26c7.js"><link rel="prefetch" href="/assets/js/95.f2493183.js"><link rel="prefetch" href="/assets/js/96.6662ec36.js"><link rel="prefetch" href="/assets/js/97.22c9d3f9.js"><link rel="prefetch" href="/assets/js/98.0b0b77a2.js"><link rel="prefetch" href="/assets/js/99.df5f5981.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e02fc531.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.png" alt="前端档案" class="logo"> <span class="site-name can-hide">前端档案</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/fe/" class="nav-link">
  前端
</a></div><div class="nav-item"><a href="/be/" class="nav-link">
  后端
</a></div><div class="nav-item"><a href="/base/" class="nav-link">
  基础
</a></div><div class="nav-item"><a href="/tools/" class="nav-link">
  工具
</a></div><div class="nav-item"><a href="/resume/" class="nav-link">
  简历
</a></div><div class="nav-item"><a href="/experience/" class="nav-link">
  面经
</a></div><div class="nav-item"><a href="/technology/" class="nav-link router-link-active">
  八股文
</a></div><div class="nav-item"><a href="/thinks/" class="nav-link">
  思考
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/fe/" class="nav-link">
  前端
</a></div><div class="nav-item"><a href="/be/" class="nav-link">
  后端
</a></div><div class="nav-item"><a href="/base/" class="nav-link">
  基础
</a></div><div class="nav-item"><a href="/tools/" class="nav-link">
  工具
</a></div><div class="nav-item"><a href="/resume/" class="nav-link">
  简历
</a></div><div class="nav-item"><a href="/experience/" class="nav-link">
  面经
</a></div><div class="nav-item"><a href="/technology/" class="nav-link router-link-active">
  八股文
</a></div><div class="nav-item"><a href="/thinks/" class="nav-link">
  思考
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/technology/" aria-current="page" class="sidebar-link">待整理部分</a></li><li><a href="/technology/excellent.html" class="sidebar-link">高频考点</a></li><li><a href="/technology/js_higher.html" aria-current="page" class="active sidebar-link">JS高级知识点</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/technology/js_higher.html#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/technology/js_higher.html#知识点" class="sidebar-link">知识点</a></li><li class="sidebar-sub-header"><a href="/technology/js_higher.html#_9个高级的javascript方法" class="sidebar-link">9个高级的JavaScript方法</a></li></ul></li><li><a href="/technology/eight_001.html" class="sidebar-link">八股文-001</a></li><li><a href="/technology/eight_002.html" class="sidebar-link">八股文-002</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="js高级知识点"><a href="#js高级知识点" class="header-anchor">#</a> JS高级知识点</h1> <p>掘金原文：<a href="https://juejin.cn/post/7022795467821940773" target="_blank" rel="noopener noreferrer">熬夜总结50个JS的高级知识点，全都会你就是神！！！<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> - 林三心</p> <h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>大家好，我是林三心，<strong>基础是进阶的前提</strong>，上一篇，我给大家分享了我这一年来平时记录的工作中碰到的50个JS基础知识点，今天就给大家分享一下，我这一年来，工作中遇到的50个JS高级知识点吧！！！</p> <h2 id="知识点"><a href="#知识点" class="header-anchor">#</a> 知识点</h2> <h3 id="_1、undeclared-与-undefined-的区别"><a href="#_1、undeclared-与-undefined-的区别" class="header-anchor">#</a> 1、undeclared 与 undefined 的区别？</h3> <ul><li>undefined：声明了变量，但是没有赋值</li> <li>undeclared：没有声明变量就直接使用</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a<span class="token punctuation">;</span> <span class="token comment">//undefined</span>
b<span class="token punctuation">;</span>    <span class="token comment">// b is not defined</span>
复制代码
</code></pre></div><h3 id="_2、let-const与-var-的区别"><a href="#_2、let-const与-var-的区别" class="header-anchor">#</a> 2、let &amp; const与 var 的区别？</h3> <ul><li>var存在变量提升，可重复声明同一变量，声明的变量均可改</li> <li>let没有变量提升，不可重复声明同一变量，声明的变量均可改</li> <li>const没有变量提升，不可重复声明同一变量，声明的基本数据类型不可改，引用类型可改属性，不可只声明变量而不赋值</li></ul> <h3 id="_3、暂时性死区问题"><a href="#_3、暂时性死区问题" class="header-anchor">#</a> 3、暂时性死区问题</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>

<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
    <span class="token comment">//在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，</span>
    <span class="token comment">// 而这时，还未到声明时候，所以控制台Error:a is not defined</span>
    <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
复制代码
</code></pre></div><h3 id="_4、获取dom元素有哪些方法"><a href="#_4、获取dom元素有哪些方法" class="header-anchor">#</a> 4、获取DOM元素有哪些方法</h3> <table><thead><tr><th>方法</th> <th>描述</th> <th>返回类型</th></tr></thead> <tbody><tr><td>document.getElementById(id)</td> <td>通过id获取dom</td> <td>符合条件的dom对象</td></tr> <tr><td>document.getElementsByTagName(tagName)</td> <td>通过标签名获取dom</td> <td>符合条件的所有dom对象组成的类数组</td></tr> <tr><td>document.getElementsByClassName(class)</td> <td>通过class获取dom</td> <td>符合条件的所有dom对象组成的类数组</td></tr> <tr><td>document.getElementsByName(name)</td> <td>通过标签的属性name获取dom</td> <td>符合条件的所有dom对象组成的类数组</td></tr> <tr><td>document.querySelector(选择器)</td> <td>通过选择器获取dom</td> <td>符合条件的第一个dom对象</td></tr> <tr><td>document.querySelectorAll(选择器)</td> <td>通过选择器获取dom</td> <td>符合条件的所有dom对象组成的类数组</td></tr></tbody></table> <h3 id="_5、操作dom元素有哪些方法"><a href="#_5、操作dom元素有哪些方法" class="header-anchor">#</a> 5、操作DOM元素有哪些方法</h3> <table><thead><tr><th>标题</th> <th>描述</th></tr></thead> <tbody><tr><td>createElement</td> <td>创建一个标签节点</td></tr> <tr><td>createTextNode</td> <td>创建一个文本节点</td></tr> <tr><td>cloneNode(deep)</td> <td>复制一个节点，连同属性与值都复制，deep为true时，连同后代节点一起复制，不传或者传false，则只复制当前节点</td></tr> <tr><td>createDocumentFragment</td> <td>创建一个文档碎片节点</td></tr> <tr><td>appendChild</td> <td>追加子元素</td></tr> <tr><td>insertBefore</td> <td>将元素插入前面</td></tr> <tr><td>removeChild</td> <td>删除子元素</td></tr> <tr><td>replaceChild</td> <td>替换子元素</td></tr> <tr><td>getAttribute</td> <td>获取节点的属性</td></tr> <tr><td>createAttribute</td> <td>创建属性</td></tr> <tr><td>setAttribute</td> <td>设置节点属性</td></tr> <tr><td>romoveAttribute</td> <td>删除节点属性</td></tr> <tr><td>element.attributes</td> <td>将属性生成类数组对象</td></tr></tbody></table> <h3 id="_6、dom的类型有哪几种"><a href="#_6、dom的类型有哪几种" class="header-anchor">#</a> 6、DOM的类型有哪几种？</h3> <p>12种</p> <div class="language- extra-class"><pre class="language-text"><code>元素节点            　　Node.ELEMENT_NODE(1)
属性节点            　　Node.ATTRIBUTE_NODE(2)
文本节点            　　Node.TEXT_NODE(3)
CDATA节点             Node.CDATA_SECTION_NODE(4)
实体引用名称节点    　　 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点        　　Node.ENTITY_NODE(6)
处理指令节点        　　Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点            　 Node.COMMENT_NODE(8)
文档节点            　 Node.DOCUMENT_NODE(9)
文档类型节点        　　Node.DOCUMENT_TYPE_NODE(10)
文档片段节点        　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点            Node.NOTATION_NODE(12)
复制代码
</code></pre></div><h3 id="_7、js的作用域及作用域链"><a href="#_7、js的作用域及作用域链" class="header-anchor">#</a> 7、JS的作用域及作用域链</h3> <h4 id="什么是作用域呢"><a href="#什么是作用域呢" class="header-anchor">#</a> 什么是作用域呢？</h4> <p>在 Javascript 中，作用域分为 <code>全局作用域</code> 和 <code>函数作用域</code></p> <ul><li>全局作用域：代码在程序任何地方都能访问，window对象的内置属性都属于全局作用域</li> <li>函数作用域：在固定的代码片段才能被访问</li></ul> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bc495bd8b13437993c4da3a52fe6803~tplv-k3u1fbpfcp-watermark.awebp?" alt="image.png"></p> <p>作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。</p> <p>作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。</p> <h4 id="什么是作用域链"><a href="#什么是作用域链" class="header-anchor">#</a> 什么是作用域链？</h4> <p>一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值</p> <p>但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">show</span><span class="token punctuation">(</span><span class="token parameter">f</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
    <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 10 </span>
<span class="token punctuation">}</span>

<span class="token function">show</span><span class="token punctuation">(</span>fn<span class="token punctuation">)</span><span class="token punctuation">;</span>
复制代码
</code></pre></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc9141580e90438c8fc54a8888e77554~tplv-k3u1fbpfcp-watermark.awebp?" alt="image.png"></p> <h3 id="_8、数组的splice-与-slice-的区别"><a href="#_8、数组的splice-与-slice-的区别" class="header-anchor">#</a> 8、数组的splice 与 slice 的区别？</h3> <table><thead><tr><th>方法</th> <th>参数</th> <th>描述</th></tr></thead> <tbody><tr><td>splice</td> <td>splice(start, num, item1, item2, ...)</td> <td>从start索引开始，截取num个元素，并插入item1、item2到原数组里，影响原数组</td></tr> <tr><td>slice</td> <td>slice(start, end)</td> <td>从start开始，截取到end - 1，如果没有end，则截取到左后一个元素，不影响原数组</td></tr></tbody></table> <h3 id="_9、substr-和-substring-的区别"><a href="#_9、substr-和-substring-的区别" class="header-anchor">#</a> 9、substr 和 substring 的区别？</h3> <table><thead><tr><th>方法</th> <th>参数</th> <th>描述</th></tr></thead> <tbody><tr><td>substr</td> <td>substr(start,length)</td> <td>返回从start位置开始length长度的子串</td></tr> <tr><td>substring</td> <td>substring(start,end)</td> <td>返回从start位置开始到end位置的子串（不包含end）</td></tr></tbody></table> <h3 id="_10、includes-比-indexof好在哪"><a href="#_10、includes-比-indexof好在哪" class="header-anchor">#</a> 10、includes 比 indexOf好在哪？</h3> <p>includes可以检测<code>NaN</code>，indexOf不能检测<code>NaN</code>，includes内部使用了<code>Number.isNaN</code>对<code>NaN</code>进行了匹配</p> <h3 id="_11、下面代码输出的结果"><a href="#_11、下面代码输出的结果" class="header-anchor">#</a> 11、下面代码输出的结果？</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>   
  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">}</span><span class="token punctuation">;</span>
复制代码
</code></pre></div><p>答案：3，3，3</p> <p>解决方法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>   
  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 0 1 2</span>
复制代码
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 0 1 2</span>
复制代码
</code></pre></div><h3 id="_12、什么是promise-解决了什么问题"><a href="#_12、什么是promise-解决了什么问题" class="header-anchor">#</a> 12、什么是Promise？解决了什么问题？</h3> <p>有什么用呢？</p> <ul><li>1、解决回调地狱问题</li> <li>2、代码可读性提高</li> <li>3、你可以信任Promise，它的状态只会改变一次并且不可逆</li></ul> <p>推荐阅读</p> <ul><li>是什么：推荐阮一峰大佬的文章<a href="https://link.juejin.cn/?target=https%3A%2F%2Fes6.ruanyifeng.com%2F%23docs%2Fpromise" target="_blank" rel="noopener noreferrer">Promise 对象<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>原理：推荐我这篇<a href="https://juejin.cn/post/6994594642280857630" target="_blank" rel="noopener noreferrer">手写Promise原理，最通俗易懂的版本！！！<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>【阅读：1.2w，点赞：466】</li></ul> <h3 id="_13、什么是async-await-解决了什么问题"><a href="#_13、什么是async-await-解决了什么问题" class="header-anchor">#</a> 13、什么是async/await？解决了什么问题？</h3> <p>对于async/await，我总结为一句话<strong>async/await是generator + Promise的语法糖，它用同步方式执行异步代码</strong></p> <p>推荐阅读</p> <ul><li>async/await的用法：阮一峰大佬的文章<a href="https://link.juejin.cn/?target=https%3A%2F%2Fes6.ruanyifeng.com%2F%23docs%2Fasync" target="_blank" rel="noopener noreferrer">async和await<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>async/await的原理：推荐我的这篇<a href="https://juejin.cn/post/7007031572238958629" target="_blank" rel="noopener noreferrer">7张图，20分钟就能搞定的async/await原理！为什么要拖那么久？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>【阅读：2.1w，点赞：630】</li></ul> <h3 id="_14、常用的正则表达式有哪些"><a href="#_14、常用的正则表达式有哪些" class="header-anchor">#</a> 14、常用的正则表达式有哪些？</h3> <p>看我这篇文章<a href="https://juejin.cn/post/7016871226899431431" target="_blank" rel="noopener noreferrer">有了这25个正则表达式，代码效率提高80%<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>【阅读：1.6w 点赞：830】</p> <h3 id="_15、js延迟加载的方法有哪些"><a href="#_15、js延迟加载的方法有哪些" class="header-anchor">#</a> 15、JS延迟加载的方法有哪些？</h3> <ul><li>1、<code>&lt;script async src=&quot;script.js&quot;&gt;&lt;/script&gt;</code>：给script标签加async属性，则加载和渲染后续文档元素的过程将和 <code>script.js</code> 的加载与执行并行进行（异步）</li> <li>2、<code>&lt;script defer src=&quot;script.js&quot;&gt;&lt;/script&gt;</code>：给script标签加defer属性，加载后续文档元素的过程将和 <code>script.js</code> 的加载并行进行（异步），但是 <code>script.js</code> 的执行要在所有元素解析完成之后，<code>DOMContentLoaded</code> 事件触发之前完成</li> <li>3、动态创建script标签：等到<code>DOMContentLoaded</code> 事件触发时，生成一个script标签，渲染到页面上上</li> <li>4、setTimeout定时器延迟代码执行</li></ul> <h3 id="_16、new操作符为什么能创建一个实例对象"><a href="#_16、new操作符为什么能创建一个实例对象" class="header-anchor">#</a> 16、new操作符为什么能创建一个实例对象？</h3> <p>分析一下new的整个过程：</p> <ul><li>1、创建一个空对象</li> <li>2、继承构造函数的原型</li> <li>3、this指向obj，并调用构造函数</li> <li>4、返回对象</li></ul> <p>简单实现一下new：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">myNew</span> <span class="token punctuation">(</span><span class="token parameter">fn<span class="token punctuation">,</span> <span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 第一步：创建一个空对象</span>
    <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

    <span class="token comment">// 第二步：继承构造函数的原型</span>
    obj<span class="token punctuation">.</span>__proto__ <span class="token operator">=</span>  fn<span class="token punctuation">.</span>prototype

    <span class="token comment">// 第三步：this指向obj，并调用构造函数</span>
    <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> args<span class="token punctuation">)</span>


    <span class="token comment">// 第四步：返回对象</span>
    <span class="token keyword">return</span> obj
<span class="token punctuation">}</span>
复制代码
</code></pre></div><h3 id="_17、什么是文档碎片"><a href="#_17、什么是文档碎片" class="header-anchor">#</a> 17、什么是文档碎片？</h3> <ul><li>是什么：一个容器，用于暂时存放创建的dom元素，使用<code>document.createDocumentFragment()</code>创建</li> <li>有什么用：将需要添加的大量元素 先添加到文档碎片 中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能</li></ul> <p>例子</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> oFragmeng <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 


<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span><span class="token number">10000</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span>

<span class="token punctuation">{</span> 

    <span class="token keyword">var</span> op <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;span&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 

    <span class="token keyword">var</span> oText <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> 

    op<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>oText<span class="token punctuation">)</span><span class="token punctuation">;</span> 

    <span class="token comment">//先附加在文档碎片中</span>

    oFragmeng<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>op<span class="token punctuation">)</span><span class="token punctuation">;</span>  

<span class="token punctuation">}</span> 


<span class="token comment">//最后一次性添加到document中</span>

document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>oFragmeng<span class="token punctuation">)</span><span class="token punctuation">;</span> 
复制代码
</code></pre></div><h3 id="_18、async-await如何检测报错"><a href="#_18、async-await如何检测报错" class="header-anchor">#</a> 18、async/await如何检测报错？</h3> <p>推荐这篇<a href="https://juejin.cn/post/7011299888465969166" target="_blank" rel="noopener noreferrer">async await 更优雅的错误处理<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>【阅读量：1.5w，点赞：210】</p> <h3 id="_19、宏任务与微任务有哪些"><a href="#_19、宏任务与微任务有哪些" class="header-anchor">#</a> 19、宏任务与微任务有哪些？</h3> <h4 id="宏任务"><a href="#宏任务" class="header-anchor">#</a> 宏任务</h4> <table><thead><tr><th>#</th> <th>浏览器</th> <th>Node</th></tr></thead> <tbody><tr><td><strong>I/O</strong></td> <td>✅</td> <td>✅</td></tr> <tr><td><strong>setTimeout</strong></td> <td>✅</td> <td>✅</td></tr> <tr><td><strong>setInterval</strong></td> <td>✅</td> <td>✅</td></tr> <tr><td><strong>setImmediate</strong></td> <td>❌</td> <td>✅</td></tr> <tr><td><strong>requestAnimationFrame</strong></td> <td>✅</td> <td>❌</td></tr></tbody></table> <h4 id="微任务"><a href="#微任务" class="header-anchor">#</a> 微任务</h4> <table><thead><tr><th>#</th> <th>浏览器</th> <th>Node</th></tr></thead> <tbody><tr><td><strong>Promise.prototype.then catch finally</strong></td> <td>✅</td> <td>✅</td></tr> <tr><td><strong>process.nextTick</strong></td> <td>❌</td> <td>✅</td></tr> <tr><td><strong>MutationObserver</strong></td> <td>✅</td> <td>❌</td></tr></tbody></table> <h3 id="_20、宏任务与微任务的执行顺序-说说eventloop"><a href="#_20、宏任务与微任务的执行顺序-说说eventloop" class="header-anchor">#</a> 20、宏任务与微任务的执行顺序？说说EventLoop？</h3> <p>看看我这篇<a href="https://juejin.cn/post/7016298598883131423" target="_blank" rel="noopener noreferrer">setTimeout+Promise+Async输出顺序？很简单呀！<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_21、object-defineproperty-target-key-options-options可传什么参数"><a href="#_21、object-defineproperty-target-key-options-options可传什么参数" class="header-anchor">#</a> 21、Object.defineProperty(target, key, options)，options可传什么参数？</h3> <ul><li>value：给target[key]设置初始值</li> <li>get：调用target[key]时触发</li> <li>set：设置target[key]时触发</li> <li>writable：规定target[key]是否可被重写，默认false</li> <li>enumerable：规定了key是否会出现在target的枚举属性中，默认为false</li> <li>configurable：规定了能否改变options，以及删除key属性，默认false，具体详细请看<a href="https://link.juejin.cn/?target=https%3A%2F%2Fblog.csdn.net%2FgetTheCheeseOfGod%2Farticle%2Fdetails%2F92411642" target="_blank" rel="noopener noreferrer">Object.defineProperty函数的configurable配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="_22、什么是防抖-什么是节流"><a href="#_22、什么是防抖-什么是节流" class="header-anchor">#</a> 22、什么是防抖？什么是节流？</h3> <table><thead><tr><th>操作</th> <th>描述</th> <th>场景</th></tr></thead> <tbody><tr><td>防抖</td> <td>频繁去触发一个事件，但是只触发最后一次。以最后一次为准</td> <td>1、电脑息屏时间，每动一次电脑又重新计算时间 2、input框变化频繁触发事件可加防抖 3、频繁点击按钮提交表单可加防抖</td></tr> <tr><td>节流</td> <td>频繁去触发一个事件，但是只能每隔一段时间触发一次</td> <td>1、滚动频繁请求列表可加节流 2、游戏里长按鼠标，但是动作都是每隔一段时间做一次</td></tr></tbody></table> <h3 id="_23、什么是高阶函数-简单实现一个"><a href="#_23、什么是高阶函数-简单实现一个" class="header-anchor">#</a> 23、什么是高阶函数？简单实现一个？</h3> <p>高阶函数：英文叫Higher-order function。JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 简单的高阶函数</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> f</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">f</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">f</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//用代码验证一下：</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span>abs<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 11</span>
复制代码
</code></pre></div><p>像数组的<code>map、reduce、filter</code>这些都是高阶函数</p> <h3 id="_24、什么是函数柯里化-简单实现一个"><a href="#_24、什么是函数柯里化-简单实现一个" class="header-anchor">#</a> 24、什么是函数柯里化？简单实现一个？</h3> <p>柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 普通的add函数</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> x <span class="token operator">+</span> y
<span class="token punctuation">}</span>

<span class="token comment">// Currying后</span>
<span class="token keyword">function</span> <span class="token function">curryingAdd</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> x <span class="token operator">+</span> y
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>           <span class="token comment">// 3</span>
<span class="token function">curryingAdd</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>   <span class="token comment">// 3</span>
复制代码
</code></pre></div><h4 id="好处"><a href="#好处" class="header-anchor">#</a> 好处</h4> <ul><li>1、参数复用</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 正常正则验证字符串 reg.test(txt)</span>

<span class="token comment">// 普通情况</span>
<span class="token keyword">function</span> <span class="token function">check</span><span class="token punctuation">(</span><span class="token parameter">reg<span class="token punctuation">,</span> txt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>txt<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">check</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">'test'</span><span class="token punctuation">)</span>       <span class="token comment">//false</span>
<span class="token function">check</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-z]+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">'test'</span><span class="token punctuation">)</span>    <span class="token comment">//true</span>

<span class="token comment">// Currying后</span>
<span class="token keyword">function</span> <span class="token function">curryingCheck</span><span class="token punctuation">(</span><span class="token parameter">reg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">txt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>txt<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> hasNumber <span class="token operator">=</span> <span class="token function">curryingCheck</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span>
<span class="token keyword">var</span> hasLetter <span class="token operator">=</span> <span class="token function">curryingCheck</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-z]+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span>

<span class="token function">hasNumber</span><span class="token punctuation">(</span><span class="token string">'test1'</span><span class="token punctuation">)</span>      <span class="token comment">// true</span>
<span class="token function">hasNumber</span><span class="token punctuation">(</span><span class="token string">'testtest'</span><span class="token punctuation">)</span>   <span class="token comment">// false</span>
<span class="token function">hasLetter</span><span class="token punctuation">(</span><span class="token string">'21212'</span><span class="token punctuation">)</span>      <span class="token comment">// false</span>
复制代码
</code></pre></div><ul><li>2、延迟执行</li></ul> <p>其实<code>Function.prototype.bind</code>就是科里化的实现例子</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">sayKey</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Sunshine_Lin'</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">23</span>
<span class="token punctuation">}</span>
<span class="token comment">// call不是科里化</span>
<span class="token function">sayKey</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">)</span> <span class="token comment">// 立即输出 Sunshine_Lin</span>
<span class="token function">sayKey</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">)</span> <span class="token comment">// 立即输出 23</span>

<span class="token comment">// bind是科里化</span>
<span class="token keyword">const</span> say <span class="token operator">=</span> <span class="token function">sayKey</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span> <span class="token comment">// 不执行</span>
<span class="token comment">// 想执行再执行</span>
<span class="token function">say</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span> <span class="token comment">// Sunshine_Lin</span>
<span class="token function">say</span><span class="token punctuation">(</span><span class="token string">'age'</span><span class="token punctuation">)</span> <span class="token comment">// 23</span>
复制代码
</code></pre></div><h3 id="_25、什么是compose-简单实现一个"><a href="#_25、什么是compose-简单实现一个" class="header-anchor">#</a> 25、什么是compose？简单实现一个？</h3> <p>简单的compose函数</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">compose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a <span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token function">a</span><span class="token punctuation">(</span> <span class="token function">b</span><span class="token punctuation">(</span> c <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
复制代码
</code></pre></div><p>例子：统计单词个数</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 普通写法</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">len</span><span class="token punctuation">(</span><span class="token function">space</span><span class="token punctuation">(</span><span class="token string">'i am linsanxin'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">len</span><span class="token punctuation">(</span><span class="token function">space</span><span class="token punctuation">(</span><span class="token string">'i am 23 year old'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 6</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">len</span><span class="token punctuation">(</span><span class="token function">space</span><span class="token punctuation">(</span><span class="token string">'i am a author in juejin'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 7</span>


<span class="token comment">// compose写法</span>
<span class="token keyword">const</span> <span class="token function-variable function">compose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>fn</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> fn<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> fn</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">fn</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> computedWord <span class="token operator">=</span> <span class="token function">compose</span><span class="token punctuation">(</span>space<span class="token punctuation">,</span> len<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">computedWord</span><span class="token punctuation">(</span><span class="token string">'i am linsanxin'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">computedWord</span><span class="token punctuation">(</span><span class="token string">'i am 23 year old'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 6</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">computedWord</span><span class="token punctuation">(</span><span class="token string">'i am a author in juejin'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 7</span>
复制代码
</code></pre></div><h3 id="_26、箭头函数与普通函数的区别"><a href="#_26、箭头函数与普通函数的区别" class="header-anchor">#</a> 26、箭头函数与普通函数的区别？</h3> <ul><li>1、箭头函数不可作为构造函数，不能使用new</li> <li>2、箭头函数没有自己的this</li> <li>3、箭头函数没有arguments对象</li> <li>4、箭头函数没有原型对象</li></ul> <h3 id="_27、symbol的应用场景"><a href="#_27、symbol的应用场景" class="header-anchor">#</a> 27、Symbol的应用场景？</h3> <h4 id="应用场景1-使用symbol来作为对象属性名"><a href="#应用场景1-使用symbol来作为对象属性名" class="header-anchor">#</a> 应用场景1：使用Symbol来作为对象属性名</h4> <p>平常我们对象的属性都是字符串</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Sunshine_Lin'</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">23</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 'Sunshine_Lin'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span><span class="token string">'age'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 23</span>
复制代码
</code></pre></div><p>其实也可以用Symbol来当做属性名</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> gender <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'gender'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Sunshine_Lin'</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">23</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>gender<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'男'</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 'Sunshine_Lin'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span><span class="token string">'age'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 23</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>gender<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 男</span>
复制代码
</code></pre></div><p>但是Symbol作为属性的属性不会被枚举出来，这也是<code>JSON.stringfy(obj)</code>时，Symbol属性会被排除在外的原因</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [ 'name', 'age' ]</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token comment">// name age</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// {&quot;name&quot;:&quot;Sunshine_Lin&quot;,&quot;age&quot;:23}</span>
复制代码
</code></pre></div><p>其实想获取Symbol属性也不是没办法。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 方法一</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getOwnPropertySymbols</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [ Symbol(gender) ]</span>
<span class="token comment">// 方法二</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Reflect<span class="token punctuation">.</span><span class="token function">ownKeys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [ 'name', 'age', Symbol(gender) ]</span>
复制代码
</code></pre></div><h4 id="应用场景2-使用symbol来替代常量"><a href="#应用场景2-使用symbol来替代常量" class="header-anchor">#</a> 应用场景2：使用Symbol来替代常量</h4> <p>有以下场景</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 赋值</span>
<span class="token keyword">const</span> one <span class="token operator">=</span> <span class="token string">'oneXin'</span>
<span class="token keyword">const</span> two <span class="token operator">=</span> <span class="token string">'twoXin'</span>

<span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> one<span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'one'</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> two<span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'two'</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
复制代码
</code></pre></div><p>如果变量少的话还好，但是变量多的时候，赋值命名很烦，可以利用Symbol的唯一性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> one <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> two <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
复制代码
</code></pre></div><h4 id="应用场景3-使用symbol定义类的私有属性"><a href="#应用场景3-使用symbol定义类的私有属性" class="header-anchor">#</a> 应用场景3：使用Symbol定义类的私有属性</h4> <p>以下例子，PASSWORD属性无法在实例里获取到</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Login</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">username<span class="token punctuation">,</span> password</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token constant">PASSWORD</span> <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>username <span class="token operator">=</span> username
    <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">PASSWORD</span><span class="token punctuation">]</span> <span class="token operator">=</span> password
  <span class="token punctuation">}</span>
  <span class="token function">checkPassword</span><span class="token punctuation">(</span><span class="token parameter">pwd</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">PASSWORD</span><span class="token punctuation">]</span> <span class="token operator">===</span> pwd <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> login <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Login</span><span class="token punctuation">(</span><span class="token string">'123456'</span><span class="token punctuation">,</span> <span class="token string">'hahah'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>login<span class="token punctuation">.</span><span class="token constant">PASSWORD</span><span class="token punctuation">)</span> <span class="token comment">// 报错</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>login<span class="token punctuation">[</span><span class="token constant">PASSWORD</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 报错</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>login<span class="token punctuation">[</span><span class="token constant">PASSWORD</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 报错</span>
复制代码
</code></pre></div><h3 id="_28、amd-和-cmd-的区别"><a href="#_28、amd-和-cmd-的区别" class="header-anchor">#</a> 28、AMD 和 CMD 的区别？</h3> <table><thead><tr><th>模块化</th> <th>代表应用</th> <th>特点</th></tr></thead> <tbody><tr><td>AMD</td> <td>require.js</td> <td>1、AMD的api默认一个当多个用 2、依赖前置，异步执行</td></tr> <tr><td>CMD</td> <td>sea.js</td> <td>1、CMD的api严格区分，推崇职责单一 2、依赖就近，按需加载，同步执行</td></tr></tbody></table> <h3 id="_29、commonjs-和-es6-module的区别"><a href="#_29、commonjs-和-es6-module的区别" class="header-anchor">#</a> 29、Commonjs 和 ES6 Module的区别</h3> <p>取自<code>阿里巴巴淘系技术前端团队</code>的回答：</p> <ul><li>1、Commonjs是拷贝输出，ES6模块化是引用输出</li> <li>2、Commonjs是运行时加载，ES6模块化是编译时输出接口</li> <li>3、Commonjs是单个值导出，ES6模块化可以多个值导出</li> <li>4、Commonjs是动态语法可写在函数体中，ES6模块化静态语法只能写在顶层</li> <li>5、Commonjs的this是当前模块化，ES6模块化的this是undefined</li></ul> <p>推荐文章<a href="https://link.juejin.cn/?target=https%3A%2F%2Fwww.cnblogs.com%2Funclekeith%2Fp%2F7679503.html" target="_blank" rel="noopener noreferrer">CommonJS模块与ES6模块的区别<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_30、为什么commonjs不适用于浏览器"><a href="#_30、为什么commonjs不适用于浏览器" class="header-anchor">#</a> 30、为什么Commonjs不适用于浏览器</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> math <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'math'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

math<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
复制代码
</code></pre></div><p>第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。</p> <p>这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于&quot;假死&quot;状态。</p> <p>因此，浏览器端的模块，不能采用&quot;同步加载&quot;（synchronous），只能采用&quot;异步加载&quot;（asynchronous）。这就是AMD规范诞生的背景。</p> <h3 id="_31、常用的es6-es12的语法有哪些"><a href="#_31、常用的es6-es12的语法有哪些" class="header-anchor">#</a> 31、常用的ES6-ES12的语法有哪些？</h3> <p>请看我这篇文章<a href="https://juejin.cn/post/6995334897065787422" target="_blank" rel="noopener noreferrer">基础很好？总结了38个ES6-ES12的开发技巧，倒要看看你能拿几分？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>【阅读量：4w，点赞：1.8k】</p> <h3 id="_32、-a-1-a-2-a-3-有可能是-true-吗"><a href="#_32、-a-1-a-2-a-3-有可能是-true-吗" class="header-anchor">#</a> 32、(a == 1 &amp;&amp; a == 2 &amp;&amp; a == 3) 有可能是 true 吗？</h3> <p>请看我这篇文章<a href="https://juejin.cn/post/6950664413317693470" target="_blank" rel="noopener noreferrer">(a == 1 &amp;&amp; a == 2 &amp;&amp; a == 3) 有可能是 true 吗？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_33、函数的length是多少"><a href="#_33、函数的length是多少" class="header-anchor">#</a> 33、函数的length是多少？</h3> <p>请看我这篇文章<a href="https://juejin.cn/post/7003369591967596552" target="_blank" rel="noopener noreferrer">95%的人都回答不上来的问题：函数的length是多少？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_35、js中的-mul-函数"><a href="#_35、js中的-mul-函数" class="header-anchor">#</a> 35、JS中的 MUL 函数</h3> <p>MUL表示数的简单乘法。在这种技术中，将一个值作为参数传递给一个函数，而该函数将返回另一个函数，将第二个值传递给该函数，然后重复继续。例如:x<em>y</em>z可以表示为</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">mul</span> <span class="token operator">=</span> <span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token parameter">y</span> <span class="token operator">=&gt;</span> <span class="token parameter">z</span> <span class="token operator">=&gt;</span> x <span class="token operator">*</span> y <span class="token operator">*</span> z

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">mul</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 6</span>
复制代码
</code></pre></div><h3 id="_36、深度遍历广度遍历的区别"><a href="#_36、深度遍历广度遍历的区别" class="header-anchor">#</a> 36、深度遍历广度遍历的区别？</h3> <p>对于算法来说 无非就是时间换空间 空间换时间</p> <ul><li>1、深度优先不需要记住所有的节点, 所以占用空间小, 而广度优先需要先记录所有的节点占用空间大</li> <li>2、深度优先有回溯的操作(没有路走了需要回头)所以相对而言时间会长一点</li> <li>3、深度优先采用的是堆栈的形式, 即先进后出</li> <li>4、广度优先则采用的是队列的形式, 即先进先出</li></ul> <h3 id="_37、js中的设计模式有哪些"><a href="#_37、js中的设计模式有哪些" class="header-anchor">#</a> 37、JS中的设计模式有哪些？</h3> <p>推荐这篇文章：<a href="https://juejin.cn/post/6844903503266054157" target="_blank" rel="noopener noreferrer">JavaScript设计模式<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>【阅读：4.4w，点赞：1250】</p> <h3 id="_38、foreach如何跳出循环"><a href="#_38、foreach如何跳出循环" class="header-anchor">#</a> 38、forEach如何跳出循环？</h3> <p>forEach是不能通过<code>break</code>或者<code>return</code>来实现跳出循环的，为什么呢？实现过forEach的同学应该都知道，forEach的的回调函数形成了一个作用域，在里面使用<code>return</code>并不会跳出，只会被当做<code>continue</code></p> <p>那怎么跳出循环呢？可以利用<code>try catch</code></p> <div class="language-js extra-class"><pre class="language-js"><code>　　<span class="token keyword">function</span> <span class="token function">getItemById</span><span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> item <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
        <span class="token keyword">try</span> <span class="token punctuation">{</span>
            arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">curItem<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>curItem<span class="token punctuation">.</span>id <span class="token operator">==</span> id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    item <span class="token operator">=</span> curItem<span class="token punctuation">;</span>
                    <span class="token keyword">throw</span> <span class="token function">Error</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> item<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
复制代码
</code></pre></div><h3 id="_39、js中如何将页面重定向到另一个页面"><a href="#_39、js中如何将页面重定向到另一个页面" class="header-anchor">#</a> 39、JS中如何将页面重定向到另一个页面？</h3> <ul><li>1、使用 location.href：window.location.href =“<a href="https://link.juejin.cn/?target=https%3A%2F%2Fwww.onlineinterviewquestions.com%2F%E2%80%9D" target="_blank" rel="noopener noreferrer">www.onlineinterviewquestions.com/”<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>2、使用 location.replace： window.location.replace(&quot; <a href="https://link.juejin.cn/?target=https%3A%2F%2Fwww.onlineinterviewquestions.com%2F" target="_blank" rel="noopener noreferrer">www.onlineinterviewquestions.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;&quot;);</li></ul> <h3 id="_40、实现一遍常用的js原生方法"><a href="#_40、实现一遍常用的js原生方法" class="header-anchor">#</a> 40、实现一遍常用的JS原生方法？</h3> <p>推荐我这篇：<a href="https://juejin.cn/post/7002248038529892383" target="_blank" rel="noopener noreferrer">3小时实现了这30个JS原生方法<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>【阅读：1.2w，点赞：488】</p> <h3 id="_41、鼠标事件有哪些"><a href="#_41、鼠标事件有哪些" class="header-anchor">#</a> 41、鼠标事件有哪些？</h3> <blockquote><p>注明：鼠标左中右键看<code>event</code>对象上的<code>button</code>属性，对应<code>1、2、3</code></p></blockquote> <table><thead><tr><th>事件</th> <th>说明</th></tr></thead> <tbody><tr><td>click</td> <td>单机鼠标左键触发，右键无效，当用户焦点在按钮并按下Enter，也会触发</td></tr> <tr><td>dbclick</td> <td>双击鼠标左键触发，右键无效</td></tr> <tr><td>mousedown</td> <td>单机鼠标任意一个按键都触发</td></tr> <tr><td>mouseout</td> <td>鼠标指针位于某个元素上且将要移出元素边界时触发</td></tr> <tr><td>mouseover</td> <td>鼠标指针移出某个元素到另一个元素上时触发</td></tr> <tr><td>mouseup</td> <td>鼠标指针移出某个元素到另一个元素上时触发</td></tr> <tr><td>mouseover</td> <td>松开任意鼠标按键时触发</td></tr> <tr><td>mousemove</td> <td>鼠标在某个元素上时持续发生</td></tr> <tr><td>mouseenter</td> <td>鼠标进入某个元素边界时触发</td></tr> <tr><td>mouseleave</td> <td>鼠标离开某个元素边界时触发</td></tr></tbody></table> <h3 id="_42、键盘事件有哪些"><a href="#_42、键盘事件有哪些" class="header-anchor">#</a> 42、键盘事件有哪些？</h3> <blockquote><p>注明：<code>event</code>对象上的<code>keyCode</code>属性，是按下的按键的<code>ASCLL值</code>，通过这个值可辨别是按下哪个按键。<code>ASCLL</code>表在此<a href="https://link.juejin.cn/?target=http%3A%2F%2Fc.biancheng.net%2Fc%2Fascii%2F" target="_blank" rel="noopener noreferrer">ASCII码一览表，ASCII码对照表<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <table><thead><tr><th>事件</th> <th>说明</th></tr></thead> <tbody><tr><td>onkeydown</td> <td>某个键盘按键被按下时触发</td></tr> <tr><td>onkeyup</td> <td>某个键盘按键被松开时触发</td></tr> <tr><td>onkeypress</td> <td>某个按键被按下时触发，不监听功能键，如ctrl，shift</td></tr></tbody></table> <h3 id="_43、js中鼠标事件的各个坐标"><a href="#_43、js中鼠标事件的各个坐标" class="header-anchor">#</a> 43、JS中鼠标事件的各个坐标？</h3> <table><thead><tr><th>属性</th> <th>说明</th> <th>兼容性</th></tr></thead> <tbody><tr><td>offsetX</td> <td>以当前的目标元素左上角为原点，定位x轴坐标</td> <td>除Mozilla外都兼容</td></tr> <tr><td>offsetY</td> <td>以当前的目标元素左上角为原点，定位y轴坐标</td> <td>除Mozilla外都兼容</td></tr> <tr><td>clientX</td> <td>以浏览器可视窗口左上角为原点，定位x轴坐标</td> <td>都兼容</td></tr> <tr><td>clientY</td> <td>以浏览器可视窗口左上角为原点，定位y轴坐标</td> <td>都兼容</td></tr> <tr><td>pageX</td> <td>以doument对象左上角为原点，定位x轴坐标</td> <td>除IE外都兼容</td></tr> <tr><td>pageY</td> <td>以doument对象左上角为原点，定位y轴坐标</td> <td>除IE外都兼容</td></tr> <tr><td>screenX</td> <td>以计算机屏幕左上顶角为原点，定位x轴坐标(多屏幕会影响)</td> <td>全兼容</td></tr> <tr><td>screenY</td> <td>以计算机屏幕左上顶角为原点，定位y轴坐标</td> <td>全兼容</td></tr> <tr><td>layerX</td> <td>最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 x 轴坐标</td> <td>Mozilla 和 Safari</td></tr> <tr><td>layerY</td> <td>最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 y 轴坐标</td> <td>Mozilla 和 Safari</td></tr></tbody></table> <h3 id="_44、js中元素视图的各个尺寸"><a href="#_44、js中元素视图的各个尺寸" class="header-anchor">#</a> 44、JS中元素视图的各个尺寸？</h3> <table><thead><tr><th>属性</th> <th>说明</th></tr></thead> <tbody><tr><td>offsetLeft</td> <td>获取当前元素到定位父节点的left方向的距离</td></tr> <tr><td>offsetTop</td> <td>获取当前元素到定位父节点的top方向的距离</td></tr> <tr><td>offsetWidth</td> <td>获取当前元素 width + 左右padding + 左右border-width</td></tr> <tr><td>offsetHeight</td> <td>获取当前元素 height + 上下padding + 上下border-width</td></tr> <tr><td>clientWidth</td> <td>获取当前元素 width + 左右padding</td></tr> <tr><td>clientHeight</td> <td>获取当前元素 height + 上下padding</td></tr> <tr><td>scrollWidth</td> <td>当前元素内容真实的宽度，内容不超出盒子宽度时为盒子的clientWidth</td></tr> <tr><td>scrollHeight</td> <td>当前元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight</td></tr></tbody></table> <h3 id="_45、window视图的各个尺寸"><a href="#_45、window视图的各个尺寸" class="header-anchor">#</a> 45、Window视图的各个尺寸？</h3> <table><thead><tr><th>属性</th> <th>说明</th></tr></thead> <tbody><tr><td>innerWidth</td> <td>innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏）</td></tr> <tr><td>innerHeight</td> <td>innerWidth 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏）</td></tr></tbody></table> <h3 id="_46、document文档视图的各个尺寸"><a href="#_46、document文档视图的各个尺寸" class="header-anchor">#</a> 46、Document文档视图的各个尺寸？</h3> <table><thead><tr><th>属性</th> <th>说明</th></tr></thead> <tbody><tr><td>document.documentElement.clientWidth</td> <td>浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）</td></tr> <tr><td>document.documentElement.clientHeight</td> <td>浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）</td></tr> <tr><td>document.documentElement.offsetHeight</td> <td>获取整个文档的高度（包含body的margin）</td></tr> <tr><td>document.body.offsetHeight</td> <td>获取整个文档的高度（不包含body的margin）</td></tr> <tr><td>document.documentElement.scrollTop</td> <td>返回文档的滚动top方向的距离（当窗口发生滚动时值改变）</td></tr> <tr><td>document.documentElement.scrollLeft</td> <td>返回文档的滚动left方向的距离（当窗口发生滚动时值改变）</td></tr></tbody></table> <h2 id="_9个高级的javascript方法"><a href="#_9个高级的javascript方法" class="header-anchor">#</a> 9个高级的JavaScript方法</h2> <h3 id="_1-getboundingclientrect"><a href="#_1-getboundingclientrect" class="header-anchor">#</a> 1. getBoundingClientRect</h3> <h4 id="_1-1-是什么"><a href="#_1-1-是什么" class="header-anchor">#</a> 1.1 是什么</h4> <div class="language- extra-class"><pre class="language-text"><code>Element.getBoundingClientRect() ` 方法返回元素的大小及其相对于视口的位置。返回的是一个对象，对象里有这8个属性：`left，right，top，bottom，width，height，x，y
</code></pre></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/520a59a2741a49ae89ea4b7787ed883c~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午7.42.59.png"></p> <h4 id="_1-2-兼容性"><a href="#_1-2-兼容性" class="header-anchor">#</a> 1.2 兼容性</h4> <p>基本在每一个浏览器都可以使用<code>getBoundingClientRect</code> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fe7137465614b0b8933261d82342e07~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午7.45.23.png"></p> <h4 id="_1-3-判断元素是否在可视区域"><a href="#_1-3-判断元素是否在可视区域" class="header-anchor">#</a> 1.3 判断元素是否在可视区域</h4> <p>这是<code>getBoundingClientRect</code>最常应用的场景了，判断一个元素是否完整出现在视口里</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// html</span>

<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;box&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

body <span class="token punctuation">{</span>
       height<span class="token operator">:</span> <span class="token number">3000</span>px<span class="token punctuation">;</span>
       width<span class="token operator">:</span> <span class="token number">3000</span>px<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

#box <span class="token punctuation">{</span>
       width<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
       height<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
       background<span class="token operator">-</span>color<span class="token operator">:</span> red<span class="token punctuation">;</span>
       margin<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
       margin<span class="token operator">-</span>left<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
<span class="token comment">// js</span>

<span class="token keyword">const</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'box'</span><span class="token punctuation">)</span>
        window<span class="token punctuation">.</span><span class="token function-variable function">onscroll</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// box完整出现在视口里才会输出true，否则为false</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">checkInView</span><span class="token punctuation">(</span>box<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">checkInView</span><span class="token punctuation">(</span><span class="token parameter">dom</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> bottom<span class="token punctuation">,</span> right <span class="token punctuation">}</span> <span class="token operator">=</span> dom<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> bottom<span class="token punctuation">,</span> right<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerHeight<span class="token punctuation">,</span> window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">)</span>
        <span class="token keyword">return</span> top <span class="token operator">&gt;=</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span>
                left <span class="token operator">&gt;=</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span>
                bottom <span class="token operator">&lt;=</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerHeight <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span>
                right <span class="token operator">&lt;=</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
复制代码
</code></pre></div><p>根据这个用处，咱们可以实现：<strong>懒加载和无限滚动</strong></p> <h4 id="_1-4-缺点"><a href="#_1-4-缺点" class="header-anchor">#</a> 1.4 缺点？</h4> <ul><li>1、每次scroll都得重新计算，性能耗费大</li> <li>2、引起<code>重绘回流</code></li></ul> <h3 id="_2-intersectionobserver"><a href="#_2-intersectionobserver" class="header-anchor">#</a> 2. IntersectionObserver</h3> <h4 id="_2-1-是什么"><a href="#_2-1-是什么" class="header-anchor">#</a> 2.1 是什么</h4> <p><code>IntersectionObserver</code><strong>接口</strong> 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(<a href="https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FGlossary%2FViewport" target="_blank" rel="noopener noreferrer">viewport<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)交叉状态的方法。祖先元素与视窗(<a href="https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FGlossary%2FViewport" target="_blank" rel="noopener noreferrer">viewport<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)被称为<strong>根(root)</strong></p> <p>通俗点说就是：<code>IntersectionObserver</code>是用来监听<strong>某个元素与视口</strong>的<code>交叉状态</code>的。交叉状态是什么呢？请看下图，一开始整个元素都在视口内，那么元素与视口的交叉状态就是<strong>100%</strong>，而我往下滚动，元素只有一半显示在视口里，那么元素与视口的交叉状态为<strong>50%</strong>：</p> <p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b16856906d2f41be953e3c2a42521c4f~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午9.11.41.png"></p> <h4 id="_2-2-用法"><a href="#_2-2-用法" class="header-anchor">#</a> 2.2 用法</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 接收两个参数 callback  option</span>
<span class="token keyword">var</span> io <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">IntersectionObserver</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> option<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 开始观察(可观察多个元素)</span>
io<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example1'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
io<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example2'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 停止观察某个元素</span>
io<span class="token punctuation">.</span><span class="token function">unobserve</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 关闭观察器</span>
io<span class="token punctuation">.</span><span class="token function">disconnect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
复制代码
</code></pre></div><h4 id="_2-3-callback"><a href="#_2-3-callback" class="header-anchor">#</a> 2.3 callback</h4> <p><code>callback</code>一般有两种触发情况。一种是目标元素刚刚进入视口（可见），另一种是完全离开视口（不可见）。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> io <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">IntersectionObserver</span><span class="token punctuation">(</span>
  <span class="token parameter">entries</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>entries<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
复制代码
</code></pre></div><p><code>callback</code>函数的参数（<code>entries</code>）是一个数组，每个成员都是一个<a href="https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FIntersectionObserverEntry" target="_blank" rel="noopener noreferrer"><code>IntersectionObserverEntry</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，<code>entries</code>数组就会有两个成员。</p> <p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/528a81ce035844b7b8e6d9775ca9773f~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午9.31.02.png"></p> <h4 id="_2-4-intersectionobserverentry对象"><a href="#_2-4-intersectionobserverentry对象" class="header-anchor">#</a> 2.4 IntersectionObserverEntry对象</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  time<span class="token operator">:</span> <span class="token number">3893.92</span><span class="token punctuation">,</span>
  rootBounds<span class="token operator">:</span> ClientRect <span class="token punctuation">{</span>
    bottom<span class="token operator">:</span> <span class="token number">920</span><span class="token punctuation">,</span>
    height<span class="token operator">:</span> <span class="token number">1024</span><span class="token punctuation">,</span>
    left<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    right<span class="token operator">:</span> <span class="token number">1024</span><span class="token punctuation">,</span>
    top<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    width<span class="token operator">:</span> <span class="token number">920</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  boundingClientRect<span class="token operator">:</span> ClientRect <span class="token punctuation">{</span>
     <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  intersectionRect<span class="token operator">:</span> ClientRect <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  intersectionRatio<span class="token operator">:</span> <span class="token number">0.54</span><span class="token punctuation">,</span>
  target<span class="token operator">:</span> element
<span class="token punctuation">}</span>
复制代码
</code></pre></div><p>属性解析：</p> <ul><li><code>time</code>：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒</li> <li><code>target</code>：被观察的目标元素，是一个 DOM 节点对象</li> <li><code>rootBounds</code>：根元素的矩形区域的信息，<code>getBoundingClientRect()</code>方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回<code>null</code></li> <li><code>boundingClientRect</code>：目标元素的矩形区域的信息</li> <li><code>intersectionRect</code>：目标元素与视口（或根元素）的交叉区域的信息</li> <li><code>intersectionRatio</code>：目标元素的可见比例，即<code>intersectionRect</code>占<code>boundingClientRect</code>的比例，完全可见时为<code>1</code>，完全不可见时小于等于<code>0</code></li></ul> <h4 id="_2-5-option"><a href="#_2-5-option" class="header-anchor">#</a> 2.5 option</h4> <p>讲讲第二个参数option里比较重要的两个属性：<code>threshold和root</code></p> <p>首先讲讲<code>threshold</code>：</p> <p><code>threshold</code>属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为<code>[0]</code>，即交叉比例（<code>intersectionRatio</code>）达到<code>0</code>时触发回调函数。</p> <div class="language- extra-class"><pre class="language-text"><code>new IntersectionObserver(
  entries =&gt; {/* ... */}, 
  {
    threshold: [0, 0.25, 0.5, 0.75, 1]
  }
);
复制代码
</code></pre></div><p>用户可以自定义这个数组。比如，<code>[0, 0.25, 0.5, 0.75, 1]</code>就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。</p> <p>再说说<code>root</code>：</p> <p>IntersectionObserver API 支持容器内滚动。<code>root</code>属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。</p> <div class="language- extra-class"><pre class="language-text"><code>new IntersectionObserver(
  entries =&gt; {/* ... */}, 
  {
    threshold: [0, 0.25, 0.5, 0.75, 1],
    root: document.getElementById('#container')
  }
);
复制代码
</code></pre></div><h4 id="_2-6-完整例子"><a href="#_2-6-完整例子" class="header-anchor">#</a> 2.6 完整例子</h4> <div class="language-js extra-class"><pre class="language-js"><code>body <span class="token punctuation">{</span>
            height<span class="token operator">:</span> <span class="token number">3000</span>px<span class="token punctuation">;</span>
            width<span class="token operator">:</span> <span class="token number">3000</span>px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

#box1 <span class="token punctuation">{</span>
            width<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            height<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            background<span class="token operator">-</span>color<span class="token operator">:</span> red<span class="token punctuation">;</span>
            margin<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
            margin<span class="token operator">-</span>left<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
#box2 <span class="token punctuation">{</span>
            width<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            height<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            background<span class="token operator">-</span>color<span class="token operator">:</span> red<span class="token punctuation">;</span>
            margin<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
            margin<span class="token operator">-</span>left<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;box1&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;box2&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

<span class="token keyword">const</span> io <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">IntersectionObserver</span><span class="token punctuation">(</span><span class="token parameter">entries</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>entries<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            threshold<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0.25</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.75</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
            <span class="token comment">// root: xxxxxxxxx</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
io<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'box1'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
io<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'box2'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
复制代码
</code></pre></div><h4 id="_2-7-使用场景"><a href="#_2-7-使用场景" class="header-anchor">#</a> 2.7 使用场景</h4> <ul><li>1、可以像<code>getBoundingClientRect</code>那样判断元素是否在视口里，并且好处是，不会引起重绘回流</li> <li>2、同理，有了第一点功能，就可以做<code>懒加载和无限滚动</code>功能了</li></ul> <h4 id="_2-8-缺点"><a href="#_2-8-缺点" class="header-anchor">#</a> 2.8 缺点</h4> <p>想兼容IE的就别考虑这个API了。。。 <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22318ac18e004c6fa74d89b93b6703b2~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午9.44.42.png"></p> <h3 id="_3-createnodeiterator"><a href="#_3-createnodeiterator" class="header-anchor">#</a> 3. createNodeIterator</h3> <h4 id="_3-1-结识这个api"><a href="#_3-1-结识这个api" class="header-anchor">#</a> 3.1 结识这个API</h4> <p>我是怎么认识这个API的呢？我面试的时候被问到了：<code>说一说，如何遍历输出页面中的所有元素</code>。我第一时间肯定想到使用循环递归去输出。面试官：行吧，回家等消息吧。</p> <p>后来我回家一查，才知道了<code>createNodeIterator</code>这个API</p> <h4 id="_3-2-解题"><a href="#_3-2-解题" class="header-anchor">#</a> 3.2 解题</h4> <p>那如何使用<code>createNodeIterator</code>对页面中所有元素进行遍历输出呢？</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> body <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    <span class="token keyword">const</span> it <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createNodeIterator</span><span class="token punctuation">(</span>body<span class="token punctuation">)</span>
    <span class="token keyword">let</span> root <span class="token operator">=</span> it<span class="token punctuation">.</span><span class="token function">nextNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">while</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span>
        root <span class="token operator">=</span> it<span class="token punctuation">.</span><span class="token function">nextNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
复制代码
</code></pre></div><p>找个网站测试下：</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c4d9c5e6f9e4dd2b8a873fa8f5cab0e~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午10.07.30.png"></p> <h4 id="_3-3-详细参数"><a href="#_3-3-详细参数" class="header-anchor">#</a> 3.3 详细参数</h4> <p>详细参数可以看<a href="https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FDocument%2FcreateNodeIterator" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，讲的很详细</p> <h4 id="_3-4-兼容性"><a href="#_3-4-兼容性" class="header-anchor">#</a> 3.4 兼容性</h4> <p>一片绿啊，大胆放心使用吧！ <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a0d74095d9e486eb1d0ce00874b6d24~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午10.08.43.png"></p> <h3 id="_4-getcomputedstyle"><a href="#_4-getcomputedstyle" class="header-anchor">#</a> 4. getComputedStyle</h3> <h4 id="_4-1-是什么"><a href="#_4-1-是什么" class="header-anchor">#</a> 4.1 是什么</h4> <p><code>Window.getComputedStyle()</code>方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。</p> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> pseudoElement<span class="token punctuation">)</span>
复制代码
</code></pre></div><ul><li><code>element</code>: 必需，要获取样式的元素。</li> <li><code>pseudoElement</code>: 可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。</li></ul> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94febd1d6dc54434acba2706e528db6f~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午10.23.01.png"></p> <h4 id="_4-2-使用"><a href="#_4-2-使用" class="header-anchor">#</a> 4.2 使用</h4> <p>搭配<code>getPropertyValue</code>可以获取到具体样式</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// html</span>
#box <span class="token punctuation">{</span>
            width<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            height<span class="token operator">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            background<span class="token operator">-</span>color<span class="token operator">:</span> yellow<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;box&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

<span class="token keyword">const</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'box'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> styles <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>box<span class="token punctuation">)</span>
<span class="token comment">// 搭配getPropertyValue可以获取到具体样式</span>
<span class="token keyword">const</span> height <span class="token operator">=</span> styles<span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">&quot;height&quot;</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> width <span class="token operator">=</span> styles<span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">&quot;width&quot;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>height<span class="token punctuation">,</span> width<span class="token punctuation">)</span> <span class="token comment">// ’300px‘ '300px'</span>
复制代码
</code></pre></div><h4 id="_4-3-兼容性"><a href="#_4-3-兼容性" class="header-anchor">#</a> 4.3 兼容性</h4> <p>一片绿油油。放心使用。 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34b836a323d648cca16729cf62a975d2~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午10.33.29.png"></p> <h3 id="_5-requestanimationframe"><a href="#_5-requestanimationframe" class="header-anchor">#</a> 5. requestAnimationFrame</h3> <p>这篇文章讲的不错，介绍，用法，兼容性，都说的明明白白：<a href="https://link.juejin.cn/?target=https%3A%2F%2Fnewbyvector.github.io%2F2018%2F05%2F01%2F2015-05-01%2F" target="_blank" rel="noopener noreferrer">requestAnimationFrame理解与实践<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_6-requestidlecallback"><a href="#_6-requestidlecallback" class="header-anchor">#</a> 6. requestIdleCallback</h3> <p>这篇文章讲的不错，介绍，用法，兼容性，都说的明明白白：<a href="https://juejin.cn/post/6844903592831238157" target="_blank" rel="noopener noreferrer">你应该知道的requestIdleCallback<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_7-domcontentloaded"><a href="#_7-domcontentloaded" class="header-anchor">#</a> 7. DOMContentLoaded</h3> <h4 id="_7-1-是什么"><a href="#_7-1-是什么" class="header-anchor">#</a> 7.1 是什么</h4> <p>当初始的 <strong>HTML</strong> 文档被完全加载和解析完成之后，<strong><code>DOMContentLoaded</code></strong> 事件被触发，而无需等待样式表、图像和子框架的完全加载。</p> <p>这时问题又来了，“HTML 文档被加载和解析完成”是什么意思呢？或者说，HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。</p> <p>浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型），然后再由 DOM 和 CSSOM 合并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览器上。所有的过程如下图所示：</p> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72715abc7afc4a299a9e93dad7fd9f88~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午10.49.44.png"></p> <p>现在你可能了解 HTML 文档被加载和解析完成前浏览器大概做了哪些工作，但还没完，因为我们还没有考虑现在前端的主角之一 JavaScript。</p> <p>JavaScript 可以阻塞 DOM 的生成，也就是说当浏览器在解析 HTML 文档时，如果遇到</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;body&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  console.log(document.getElementById('ele')); // null
  &lt;/script&gt;

  &lt;div id=&quot;ele&quot;&gt;&lt;/div&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
  console.log(document.getElementById('ele')); // &lt;div id=&quot;ele&quot;&gt;&lt;/div&gt;
  &lt;/script&gt;
&lt;/body&gt;
复制代码
</code></pre></div><p>另外，因为 JavaScript 可以查询任意对象的样式，所以意味着在 CSS 解析完成，也就是 CSSOM 生成之后，JavaScript 才可以被执行。</p> <p>到这里，我们可以总结一下。当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等 CSSOM 构建完成才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。</p> <h4 id="_7-2-异步脚本"><a href="#_7-2-异步脚本" class="header-anchor">#</a> 7.2 异步脚本</h4> <p>我们到这里一直在说同步脚本对网页渲染的影响，如果我们想让页面尽快显示，那我们可以使用异步脚本。HTML5 中定义了两个定义异步脚本的方法：defer 和 async。我们来看一看他们的区别。</p> <p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b433867f313f4587adb2bcbfeaadaf7b~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"> 同步脚本（标签中不含 async 或 defer）：</p> <p>当 HTML 文档被解析时如果遇见（同步）脚本，则停止解析，先去加载脚本，然后执行，执行结束后继续解析 HTML 文档。过程如下图：</p> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb50ffd06d96405fab995ff9dd1aac47~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p> <p>defer 脚本：</p> <p>当 HTML 文档被解析时如果遇见 defer 脚本，则在后台加载脚本，文档解析过程不中断，而等文档解析结束之后，defer 脚本执行。另外，defer 脚本的执行顺序与定义时的位置有关。过程如下图：</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d1ee928523b460ba8464a33253cca03~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p> <p>async 脚本：</p> <p>当 HTML 文档被解析时如果遇见 async 脚本，则在后台加载脚本，文档解析过程不中断。脚本加载完成后，文档停止解析，脚本执行，执行结束后文档继续解析。过程如下图：</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca7cd2d573194e2789f3a7aad7e63dfe~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p> <p>如果你 Google &quot;async 和 defer 的区别&quot;，你可能会发现一堆类似上面的文章或图片，而在这里，我想跟你分享的是 async 和 defer 对 DOMContentLoaded 事件触发的影响。</p> <p><strong>defer 与 DOMContentLoaded</strong></p> <p>如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。 所以这意味着什么呢？HTML 文档解析不受影响，等 DOM 构建完成之后 defer 脚本执行，但脚本执行之前需要等待 CSSOM 构建完成。在 DOM、CSSOM 构建完毕，defer 脚本执行完成之后，DOMContentLoaded 事件触发。</p> <p><strong>async 与 DOMContentLoaded</strong></p> <p>如果 script 标签中包含 async，则 HTML 文档构建不受影响，解析完毕后，DOMContentLoaded 触发，而不需要等待 async 脚本执行、样式表加载等等。</p> <h4 id="_7-3-domcontentloaded-与-load"><a href="#_7-3-domcontentloaded-与-load" class="header-anchor">#</a> 7.3 DOMContentLoaded 与 load</h4> <p>在回头看第一张图：</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a47e823a640f49c9ba4088aa4935dd31~tplv-k3u1fbpfcp-watermark.awebp" alt="img"></p> <p>与标记 1 的蓝线平行的还有一条红线，红线就代表 load 事件触发的时间，对应的，在最下面的概览部分，还有一个用红色标记的 &quot;Load:1.60s&quot;，描述了 load 事件触发的具体时间。</p> <p>这两个事件有啥区别呢？点击这个网页你就能明白：<a href="https://link.juejin.cn/?target=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%3A%2F%2Ftestdrive-archive.azurewebsites.net%2FHTML5%2FDOMContentLoaded%2FDefault.html" target="_blank" rel="noopener noreferrer">testdrive-archive.azu...<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>解释一下，当 HTML 文档解析完成就会触发 DOMContentLoaded，而所有资源加载完成之后，load 事件才会被触发。</p> <p>另外需要提一下的是，我们在 jQuery 中经常使用的 (document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件，而(<em>d<strong>o</strong>c<strong>u</strong>m<strong>e</strong>n**t</em>).<em>r<strong>e</strong>a<strong>d</strong>y</em>(<em>f<strong>u</strong>n<strong>c</strong>t<strong>i</strong>o**n</em>()//...代码...);其实监听的就是<em>D<strong>O</strong>M<strong>C</strong>o<strong>n</strong>t<strong>e</strong>n<strong>t</strong>L<strong>o</strong>a<strong>d</strong>e**d</em>事件，而(document).load(function() { // ...代码... }); 监听的是 load 事件。</p> <h4 id="_7-4-使用"><a href="#_7-4-使用" class="header-anchor">#</a> 7.4 使用</h4> <div class="language-js extra-class"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;DOMContentLoaded&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;DOM fully loaded and parsed&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
复制代码
</code></pre></div><h4 id="_7-5-兼容性"><a href="#_7-5-兼容性" class="header-anchor">#</a> 7.5 兼容性</h4> <p>绿油油一片，放心使用</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ff0e439b31b4df39f968975d445b766~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午11.00.35.png"></p> <h3 id="_8-mutationobserver"><a href="#_8-mutationobserver" class="header-anchor">#</a> 8. MutationObserver</h3> <h4 id="_8-1-是什么"><a href="#_8-1-是什么" class="header-anchor">#</a> 8.1 是什么</h4> <p><code>MutationObserver</code> 是一个内建对象，它观察 DOM 元素，并在检测到更改时触发回调。</p> <h4 id="_8-2-用法"><a href="#_8-2-用法" class="header-anchor">#</a> 8.2 用法</h4> <div class="language- extra-class"><pre class="language-text"><code>// 选择需要观察变动的节点
const targetNode = document.getElementById('some-id');

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();
复制代码
</code></pre></div><h4 id="_8-3-config"><a href="#_8-3-config" class="header-anchor">#</a> 8.3 config</h4> <p><code>config</code> 是一个具有布尔选项的对象，该布尔选项表示“将对哪些更改做出反应”：</p> <ul><li><code>childList</code> —— <code>node</code> 的直接子节点的更改，</li> <li><code>subtree</code> —— <code>node</code> 的所有后代的更改，</li> <li><code>attributes</code> —— <code>node</code> 的特性（attribute），</li> <li><code>attributeFilter</code> —— 特性名称数组，只观察选定的特性。</li> <li><code>characterData</code> —— 是否观察 <code>node.data</code>（文本内容）</li></ul> <p>其他几个选项：</p> <ul><li><code>attributeOldValue</code> —— 如果为 <code>true</code>，则将特性的旧值和新值都传递给回调（参见下文），否则只传新值（需要 <code>attributes</code> 选项），</li> <li><code>characterDataOldValue</code> —— 如果为 <code>true</code>，则将 <code>node.data</code> 的旧值和新值都传递给回调（参见下文），否则只传新值（需要 <code>characterData</code> 选项）。</li></ul> <h4 id="_8-4-兼容性"><a href="#_8-4-兼容性" class="header-anchor">#</a> 8.4 兼容性</h4> <p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ecab3606bcc4799b87baa6981963141~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午11.07.52.png"></p> <h3 id="_9-promise-any"><a href="#_9-promise-any" class="header-anchor">#</a> 9. Promise.any</h3> <h4 id="_9-1-是什么"><a href="#_9-1-是什么" class="header-anchor">#</a> 9.1 是什么</h4> <p><code>Promise.any()</code> 接收一个<code>Promise</code>可迭代对象，只要其中的一个 <code>promise</code> 成功，就返回那个已经成功的 <code>promise</code> 。如果可迭代对象中没有一个 <code>promise</code> 成功（即所有的 <code>promises</code> 都失败/拒绝），就返回一个失败的 promise 和<code>AggregateError</code>类型的实例，它是 Error 的一个子类，用于把单一的错误集合在一起。本质上，这个方法和<code>Promise.all()</code>是相反的。</p> <h4 id="_9-2-用法-例子"><a href="#_9-2-用法-例子" class="header-anchor">#</a> 9.2 用法（例子）</h4> <div class="language- extra-class"><pre class="language-text"><code>const promise1 = new Promise((resolve, reject) =&gt; {
  setTimeout(reject, 100, 'promise 1 rejected');
});

const promise2 = new Promise((resolve, reject) =&gt; {
  setTimeout(resolve, 400, 'promise 2 resolved at 400 ms');
});

const promise3 = new Promise((resolve, reject) =&gt; {
  setTimeout(resolve, 700, 'promise 3 resolved at 800 ms');
});

(async () =&gt; {
  try {
    let value = await Promise.any([promise1, promise2, promise3]);
    console.log(value);
  } catch (error) {
    console.log(error);
  }
})();
复制代码
</code></pre></div><h4 id="_9-3-兼容性"><a href="#_9-3-兼容性" class="header-anchor">#</a> 9.3 兼容性</h4> <p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ee796495a0a446eb67765b65ef6672e~tplv-k3u1fbpfcp-watermark.awebp" alt="截屏2021-07-25 下午11.18.15.png"></p> <p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53480cd479cc4a3e9393bce93e9f2c23~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新时间:</span> <span class="time">11/11/2021, 8:14:15 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/technology/excellent.html" class="prev">
        高频考点
      </a></span> <span class="next"><a href="/technology/eight_001.html">
        八股文-001
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.bf44e39b.js" defer></script><script src="/assets/js/2.db7a59af.js" defer></script><script src="/assets/js/269.9c9a802f.js" defer></script>
  </body>
</html>
